<template>
  <div class="wholesale-detail">
    <div class="block">
      <header>
        <h2>消耗单信息</h2>
      </header>
      <section class="step">
        <div class="orderDetail">
          <p>消耗单编号：{{ orderDetail.orderCode }}</p>
          <p>消耗单状态：{{ orderDetail.orderStatusName }}</p>
          <p>供应商：{{ orderDetail.supplierName }}</p>
          <p>合同名称：{{ orderDetail.contractName }}</p>
        </div>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>消耗产品</h2>
      </header>
      <section>
        产品线：BK
        <el-editable :columns="columns" :data="payload"></el-editable>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>收货人信息</h2>
      </header>
      <section>
        <el-row>
          <el-col :span="4">收货联系人：{{consigneeInfo.addressee}}</el-col>
          <el-col
            :span="10"
          >收货地址：{{consigneeInfo.province}}{{consigneeInfo.city}}{{consigneeInfo.area}}{{consigneeInfo.detail}}</el-col>
          <el-col :span="8">联系电话：{{consigneeInfo.addressPhone}}</el-col>
          <el-col :span="5">运费承担方：{{orderDetail.freight}}</el-col>
        </el-row>
      </section>
    </div>
    <div class="block otherInfo">
      <section class="orderTab">
        <div class="detail">
          <p :class="{ active: activeIndex === 0 }" @click="changeIndex(0)">附加信息</p>
        </div>
        <div class="detail">
          <p :class="{ active: activeIndex === 1 }" @click="changeIndex(1)">序列号信息</p>
          <div v-show="activeIndex === 1">
            <el-editable :columns="order_tab[1].columns" :data="order_tab[1].tabData"></el-editable>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
